<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-02-10 08:58:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-10 09:31:15
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        div {
          width: 100px;
          height: 100px;
          background-color: skyblue;
    
          position: absolute;
          left: 200px;
          top: 150px;
        }
    
        p {
          width: 100px;
          height: 100px;
          background-color: orange;
    
          position: absolute;
          left: 0;
          top: 130px;
        }
      </style>
</head>
<body>
    <div></div>
    <p></p>
    <script>
        // 获取元素 
        var div = document.querySelector('div');
        // div.onclick = ()=>{
        //     // div.style.left = '200px'; 瞬间定位 不能实现动画效果
        //     // 定义一个初始值  
        //     var init = 0;
        //     var timer = setInterval(()=>{
        //         init+=5;
        //         div.style.left = init + 'px';
        //         if(init>=200) clearInterval(timer)
        //     },10)
        // }

         // 解决每次 回到原点的问题   
         // 开始获取的是 元素当前的i  
        // 获取元素
        // div.onclick = ()=>{
        //     // div.style.left = '200px'; 瞬间定位 不能实现动画效果
        //     // 定义一个初始值  
        //     var init = parseInt(window.getComputedStyle(div).left);
        //     var timer = setInterval(()=>{
        //         init+=5;
        //         div.style.left = init + 'px';
        //         if(init>=600) clearInterval(timer)
        //     },10)
        // }

        // 每次加5 目标是 501 不是5的倍数  所以到达不了重终点  

        // 解决到达到终点的问题

        // 1. +=1 
        // 2. 每次走目标值的十分之一
        // 3. 每次走剩余路程的十分之一
        
    </script>
</body>
</html>